<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<link href="skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.dynatree.js"></script>
<script type="text/javascript"><!--
$(function(){
	// --- Initialize first Dynatree -------------------------------------------
	$("#tree").dynatree({
		initAjax: {
			url: "tree.json"
		},
		minExpandLevel : 10,
		autoFocus: true,
		onActivate:function(node) {
			//console.log("onActivate", node);
			//console.log("onActivate menuName", node.data.metadata.menuName);
			//console.log("onActivate urls", node.data.metadata.urls);
		},
		onFocus: function(node) {
			node.scheduleAction("activate", 200);
		},
		onLazyRead: function(node){
			node.appendAjax({
				url: "tree.json",
				debugLazyDelay: 750 // don't do this in production code
			});
		},
		dnd: {
			onDragStart: function(node) {
				return true;
			},
			onDragStop: function(node) {
			},
			autoExpandMS: 1000,
			preventVoidMoves: true,
			onDragEnter: function(node, sourceNode) {
				return true;
			},
			onDragOver: function(node, sourceNode, hitMode) {
				if(node.isDescendantOf(sourceNode)){
					return false;
				}
				if( !node.data.isFolder && hitMode === "over" ){
					return "after";
				}
			},
			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
				sourceNode.move(node, hitMode);
				node.expand(true);
			},
			onDragLeave: function(node, sourceNode) {
				sourceNode.data.metadata.parentMenuSeq = sourceNode.parent.data.metadata.menuSeq;
			}
		},
		debugLevel : 1
	});
	
	$("#menuName").change(function(){
		var selectedNode = $("#tree").dynatree("getActiveNode");
		selectedNode.setTitle($(this).val());
		selectedNode.data.metadata.menuName = $(this).val(); 
	});
	
	$("#urls").change(function() {
		var selectedNode = $("#tree").dynatree("getActiveNode");
		selectedNode.data.metadata.urls = $(this).val();
	});
	
	$("#save").click(function() {
		var nodes = $("#tree").dynatree("getRoot");
		var sendData = [];
		function getChildMetadata(childList) {
			$.each(childList, function() {
				if ( this.data.metadata != null)
					sendData.push(this.data.metadata);
				
				if ( this.childList != null)
					getChildMetadata(this.childList);
			});
		};
		
		getChildMetadata(nodes.childList);
		
		console.log(sendData);
		console.log(JSON.stringify(sendData));
	});
	
	$("#create").click(function() {
		var selectedNode = $("#tree").dynatree("getActiveNode");
		/* TODO menuSeq 데이터 베이스에서 가져오도록~~ */
		selectedNode.addChild({
			title: "New Menu",
			metadata: {
               "menuName": "New Menu",
               "menuSeq": 0,
               "orders": 0,
               "parentMenuSeq": selectedNode.data.metadata.menuSeq,
               "urls": "/"
           	}
		});
	});
	
	$("#delete").click(function() {
		var selectedNode = $("#tree").dynatree("getActiveNode");
		if ( selectedNode.data.key == '_2' ) {
			alert("최상위 엘리먼트는 삭제하실 수 없습니다.");
			return;
		}
		var parent = selectedNode.parent;
		selectedNode.remove();
		parent.focus();
	});
});
--></script>
</head>
<body>
<h3>dynatree</h3>
<div id="tree"> </div>
<div>
	<input type="text" id="menuName" name="menuName" />
	<input type="text" id="urls" name="urls" />
</div>
<div>
	<button id="create">Create</button>
	<button id="save">Save</button>
	<button id="delete">Delete</button>
</div>
</body>
</html>
